<template>
  <div>
    <div class="ims">| 用箱需求</div>
    <el-form ref="form" :model="form" label-width="120px" :inline="true">
      <el-form-item label="箱号：" v-if="keys.includes('xh')">
        <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.vanUseRequirements.plannum"></el-input>
      </el-form-item>
      <el-form-item label="持箱人：" v-if="keys.includes('cxr')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.cstCopercd" filterable placeholder="请选择持箱人">
          <el-option  :label="item.relationTenantName" :value="item.relationTenantId"
                      v-for="item in dataList.cstCoperList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="贸易类型：" v-if="keys.includes('mylx')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.cszCsizecd" placeholder="请选择贸易类型">
          <el-option  :label="item.containerType" :value="item.containerType"  v-for="item in dataList.boxList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装货港：" v-if="keys.includes('zhg')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.ctypecd" placeholder="请选择装货港">
          <el-option  :label="item.containerType" :value="item.containerType"  v-for="item in dataList.boxList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="卸货港：" v-if="keys.includes('xhg')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.ovlmtcd" placeholder="请选择卸货港">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.OVER_LMT_CD"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目的港：" v-if="keys.includes('wxbz')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.dirtyfg" placeholder="请选择目的港">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.DIRTYCD"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船公司箱型：" v-if="keys.includes('cgs')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.brkdmgcd" placeholder="请选择船公司箱型">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.BRKDMGCD"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="箱ISO：" v-if="keys.includes('iso')">
        <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="铅封号：" v-if="keys.includes('mylx')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择铅封号">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="箱货总重（吨）：" v-if="keys.includes('xhzz')">
        <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.remark"></el-input>
      </el-form-item>

      <el-form-item label="运输方式：" v-if="keys.includes('ysfs')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择运输方式">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="危险品类别：" v-if="keys.includes('wxplb')">
        <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="危险品联合国编号：" v-if="keys.includes('wxplhg')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择危险品联合国编号">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="温度：" v-if="keys.includes('temp')">
        <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="温度单位：" v-if="keys.includes('tempU')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择温度单位">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残损代码：" v-if="keys.includes('csdm')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择残损代码">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工原始标志：" v-if="keys.includes('gysbz')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择工原始标志">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附加操作：" v-if="keys.includes('fjcz')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择附加操作">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="超限标志：" v-if="keys.includes('cxbz')" style="padding: 0" prop="termCode">
        <el-select  @change="re" clearable style="width: 220px" size="small"
                    v-model="form.vanUseRequirements.internalfg" placeholder="请选择超限标志">
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item in dataList.INTERNALFG_IM"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="ims">| <span v-for="(item,index) in list">货信息{{index+1}} </span>
      <span><i class="el-icon-circle-plus-outline"
                                     @click="list.push({})"></i></span>   </div>
    <div v-for="item in list">

      <el-form ref="form1" :model="form" label-width="120px"  :inline="true">
        <el-form-item label="提单号：" v-if="keys.includes('tdh')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择提单号">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订舱号：" v-if="keys.includes('dch')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择订舱号">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货主：" v-if="keys.includes('hz')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择货主">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货名：" v-if="keys.includes('hm')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.billNo"></el-input>
        </el-form-item>
        <el-form-item label="发货人：" v-if="keys.includes('fhr')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.billNo"></el-input>
        </el-form-item>
        <el-form-item label="收货人：" v-if="keys.includes('shr')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.billNo"></el-input>
        </el-form-item>
        <el-form-item label="货代：" v-if="keys.includes('hd')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择货代">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分件数：" v-if="keys.includes('fjs')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text"
                    v-model="form.planReturn.billNo">
            <template slot="suffix">
              <span>件</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="分重量（吨）：" v-if="keys.includes('fzl')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text"
                    v-model="form.planReturn.billNo">
            <template slot="suffix">
              <span>吨</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="分体积（立方米）：" v-if="keys.includes('ftj')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text"
                    v-model="form.planReturn.billNo">
            <template slot="suffix">
              <span>m³</span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="支付方式：" v-if="keys.includes('zffs')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择支付方式">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分货地：" v-if="keys.includes('fhd')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择分货地">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="危险品类别：" v-if="keys.includes('wxplb')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择危险品类别">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="危险品联合国代码：" v-if="keys.includes('wxpuni')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.billNo"></el-input>
        </el-form-item>
        <el-form-item label="包装类型：" v-if="keys.includes('bzlx')" style="padding: 0" prop="termCode">
          <el-select disabled @change="re" clearable style="width: 220px" size="small"
                     v-model="form.returnTermcd" placeholder="请选择包装类型">
            <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="温度：" v-if="keys.includes('temp1')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.billNo"></el-input>
        </el-form-item>
        <el-form-item label="温度单位：" v-if="keys.includes('tempU1')">
          <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.billNo"></el-input>
        </el-form-item>
        <!--      <el-form-item label="唛头：" v-if="keys.includes('form6')">
                <el-input style="width: 220px;" :disabled="!showEd" size="small" type="text" v-model="form.planReturn.mark"></el-input>
              </el-form-item>

              <el-form-item label="附件：" v-if="keys.includes('form5')||keys.includes('form6')">
                <upload-img ref="upLoad" @set="setFile"></upload-img>
                &lt;!&ndash;        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planAttachmentList."></el-input>&ndash;&gt;
              </el-form-item>-->
      </el-form>
    </div>

    <div style="display: flex;align-content: space-around;justify-content: center" v-if="showEd">
      <el-button type="primary" class="sub" @click="sub">下一步</el-button>
      <el-button class="cal" @click="cal">取消</el-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import uploadImg from "@/components/uploadImg";

export default {
  name: "formList2",
  components:{
    uploadImg
  },
  data(){
    return{
      list:[{}],
      dataList:{},
      goods:null,
      goodsType:[],
      goodsList:[],
      tips:[{key:'HX',value:'河西码头'},{key:'LTG',value:'龙头港'}],
      boxSt:[{key:'AF',value:'内贸'},{key:'OF',value:'外贸'}],
      temp:[{key:'H',value:'华氏度'},{key:'C',value:'摄氏度'}],
      shipNo:[],
      form:{
        termCode:'HX',
        returnTermcd:'HX',
        opsttm:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        opedtm:moment(new Date()).add(7,"days").format('YYYY-MM-DD HH:mm:ss'),
        vanUseRequirements:{},
        planReturn:{}

      },
    }
  },
  props:{
    showEd:{
      default: () => true
    },
    keys: {
      default: () => []
    },
  },
  watch:{
    keys(){
      //this.form.planBulkGoods.morphology=this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH'
    },
  },
  created() {
    this.getDateList()
  },
  methods:{
    getDateList(){
      this.dataList={
        INTERNALFG_IM:[],
        OVER_LMT_CD:[],
        DIRTYCD:[],
        BRKDMGCD:[],
        cus:[],
        boxSize:[],
        ports:[],
        hz:[],
        hd:[],
        danger:[],
        union:[]
      }
      this.$api.getDangerUnionno().then(res=>{
        this.dataList.union=res.data
      }).catch()
      this.$api.voyagesPage({
        //termCode:'HX',
        size:999,
        current:0
      }).then(res=>{
        this.shipNo=res.data.records
      }).catch()
      this.$api.dangerCode().then(res=>{
        this.dataList.danger=res.data.data
        this.$forceUpdate()
      }).catch()
       this.$api.port().then((res) => {
          this.dataList.ports = res.data.data
          this.$forceUpdate()
        }).catch()
      this.$api.customerByType({
        tenantTypeName:'货主'
      }).then(res=>{
        this.dataList.hz=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName:'货代'
      }).then(res=>{
        this.dataList.hd=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.getCustomerRelations({
        //termCode:'HX'
      }).then(res=>{
        this.dataList.cstCoperList=res.data
        this.$forceUpdate()
      }).catch()
      this.$api.containerTypeSizeInfo().then(res=>{
        this.dataList.boxList=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'OVER_LMT_CD'
      }).then(res=>{
        this.dataList.OVER_LMT_CD=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'DIRTYCD'
      }).then(res=>{
        this.dataList.DIRTYCD=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'BRKDMGCD'
      }).then(res=>{
        this.dataList.BRKDMGCD=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'INTERNALFG_IM'
      }).then(res=>{
        this.dataList.INTERNALFG_IM=res.data.data
        this.$forceUpdate()
      }).catch()
      /*不确定*/
      this.$api.getVessels().then(res=>{
        this.dataList.ships=res.data
      }).catch()
      /*this.$api.customerByType({
        tenantTypeName:'码头'
      }).then(res=>{
        this.dataList.tips=res.data.data
      }).catch()*/

      console.log(localStorage.getItem('userInfo'))
      //this.$forceUpdate()
    },
    setFile(res){
      console.log(999)
      console.log(res)
      this.form.planAttachmentList=res
    },
    re(){
      this.$forceUpdate()
    },
    formatToTree(ary, pid) {
      return ary
          .filter((item) =>
              // 如果没有父id（第一次递归的时候）将所有父级查询出来
              // 这里认为 item.parentId === 1 就是最顶层 需要根据业务调整
              pid === undefined ? item.parentType === null : item.parentType === pid
          )
          .map((item) => {
            // 通过父节点ID查询所有子节点
            item.children = this.formatToTree(ary, item.type);
            return item;
          });
    },
    ch(e){
      console.log(e)
      this.goodsList.forEach(item=>{
        if(item.id===e){
          this.form.planBulkGoods.gtypecd=item.type
        }
      })

    },
    getGoods(){
      console.log(88888)
      this.$api.getGoodsType().then(res=>{
        console.log(res.data)
        this.goodsList=res.data
        let a=this.formatToTree(res.data)
        console.log(999999)
        let tree = JSON.stringify(a)
        tree=tree.replace(/name/g,'label')
        tree=tree.replace(/\[\]/g,'\"\"')
        //console.log(JSON.parse(tree))
        this.goodsType=JSON.parse(tree)
        console.log(this.goodsType)
        if(''!==this.form.planBulkGoods.gtypecd){
          this.goodsList.forEach(item=>{
            if(item.type===this.form.planBulkGoods.gtypecd){
              this.goods=item.id
            }
          })
        }else{
          this.goods=null
        }
        this.$forceUpdate()
      }).catch()
    },
    opsttm(e){
      console.log(e)
      this.form.opsttm=moment(this.form.opsttm).format('YYYY-MM-DD HH:mm:ss')
    },
    cal(){
      this.$emit('cal')
    },
    sub(){
      this.$emit('sub')
    },
    onSubmit(){

    },
  },
}
</script>

<style scoped lang="less">
.sub{
  background: #043AA7;
  border-radius: 4px;
}
.cal{
  background: #F9F7F7;
  color: #666;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
}
.ims{
  width: 47vw;
  background: #F8F8F8;
  color: #043AA7;
  //border-left: #2368D2 solid 2px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>
